<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h3>{{poss}}</h3>
     <h3>{{add}}</h3>
    <div id="gd-map"></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
    poss:{},
      msg: 'Welcome to Your Vue.js App',
      add:'',
    };
  },
  mounted() {
    this.getGDMap();
   
  },
  methods: {
    getGDMap() { 
       let that=this;
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        console.log('获取地理位置成功：', pos);
        // 1.重新赋值
        this.poss={
          longitude:pos.coords.longitude,
          latitude:pos.coords.latitude,
      };
      // 逆向地理编码，通过经纬度获取地理位置
     AMap.plugin('AMap.Geocoder', function() {
  var geocoder = new AMap.Geocoder({
    // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
    city: '010',
  });
 
  var lnglat = [pos.coords.longitude,pos.coords.latitude];
  console.log('经纬度是：',lnglat);

  geocoder.getAddress(lnglat, function(status, result) {
    if (status === 'complete' && result.info === 'OK') {
        // result为对应的地理位置详细信息
        console.log('您所在的位置是：',result);
        that.add=result.regeocode.formattedAddress;
    }
    console.log('逆地理编码的结果',result);
  })
});
    let map = new AMap.Map('gd-map', {
        zoom: 11,
        center: [pos.coords.longitude,pos.coords.latitude], //中心点坐标
      });
      (err) => {
        console.log('获取地理位置失败：', err);
      }
      },
    );

  
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#gd-map {
  width: 100%;
  height: 300px;
}
</style>
